<template>
  <PageWrapper title="抽屉组件使用示例">
    <el-alert type="error" title="使用 useDrawer 进行抽屉操作" show-icon />
    <Drawer1 />

    <el-alert title="内外同时控制显示隐藏" show-icon />
    <el-button type="primary" class="my-4" @click="openDrawer2(true)">打开Drawer</el-button>
    <el-alert title="自适应高度/显示footer" show-icon />
    <el-button type="primary" class="my-4" @click="openDrawer3(true)">打开Drawer</el-button>
    <el-alert title="内外数据交互" show-icon />
    <el-button type="primary" class="my-4" @click="send">打开Drawer并传递数据</el-button>
    <el-alert title="详情页模式" show-icon />
    <el-button type="primary" class="my-4" @click="openDrawer5(true)">打开详情Drawer</el-button>
    <Drawer2 @register="register2" />
    <Drawer3 @register="register3" />
    <Drawer4 @register="register4" />
    <Drawer5 @register="register5" />
  </PageWrapper>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElAlert, ElButton } from 'element-plus'
import { useDrawer } from '@/components/BasicDrawer'
import Drawer1 from './Drawer1.vue'
import Drawer2 from './Drawer2.vue'
import Drawer3 from './Drawer3.vue'
import Drawer4 from './Drawer4.vue'
import Drawer5 from './Drawer5.vue'

export default defineComponent({
  components: {
    ElAlert,
    ElButton,
    Drawer1,
    Drawer2,
    Drawer3,
    Drawer4,
    Drawer5,
  },
  setup() {
    const [register2, { openDrawer: openDrawer2 }] = useDrawer()
    const [register3, { openDrawer: openDrawer3 }] = useDrawer()
    const [register4, { openDrawer: openDrawer4 }] = useDrawer()
    const [register5, { openDrawer: openDrawer5 }] = useDrawer()
    function send() {
      openDrawer4(true, {
        data: 'content',
        info: 'Info',
      })
    }
    return {
      register2,
      openDrawer2,
      register3,
      openDrawer3,
      register4,
      register5,
      openDrawer5,
      send,
    }
  },
})
</script>
